<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 查询表单；查询 新增按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">商品类型</label>
            <div class="layui-input-inline">
                <select id="input1" name="categoryId">
                    <option value="" selected>请选择商品类型</option>
                    <optgroup label="分组 A">
                        <option value="A-1">选项 A-1</option>
                        <option value="A-2">选项 A-2</option>
                        <option value="A-3">选项 A-3</option>
                    </optgroup>
                    <optgroup label="分组 B">
                        <option value="B-1">选项 B-1</option>
                        <option value="B-2">选项 B-2</option>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">商品名</label>
            <div class="layui-input-inline">
                <input id="input2" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">商品版本</label>
            <div class="layui-input-inline layui-input-wrap">
                <input id="input3" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input id="addBtn" type="button" value="新增商品" class="layui-btn">
            <input id="searchBtn" type="button" value="查询" class="layui-btn">
        </div>
    </div>
</form>

<table id="table1"></table>

<!--弹出窗口的模板 -->
<!-- 新增/编辑  -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <!-- 一级分类只是为了限制二级分类的选择，它本身不提交表单数据 -->
                <label class="layui-form-label">一级分类</label>
                <div class="layui-input-inline">
                    <select id="topCategory" lay-filter="topSelect"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">二级分类</label>
                <div class="layui-input-inline">
                    <select id="secondCategory" name="categoryId"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品名</label>
                <div class="layui-input-inline">
                    <!-- 放置一个隐藏框 name="id" 可以被赋值
                        新增的时候id没有值 编辑的时候id有值 -->
                    <input type="hidden" name="id">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">版本</label>
                <div class="layui-input-inline">
                    <input type="text" name="edition" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">颜色</label>
                <div class="layui-input-inline">
                    <input type="text" name="color" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">型号</label>
                <div class="layui-input-inline">
                    <input type="text" name="model" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择上架状态</option>
                        <option value="0">上架</option>
                        <option value="-1">下架</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">首页图</label>
                <div class="layui-input-inline">
                    <!-- 选择文件并上传时，上传文件就已经完成了，并返回文件地址 -->
                    <img id="Img-path" width="50ox" height="50px"/>
                    <!-- 点击保存时，保存到数据库的只是上传的文件的地址 -->
                    <input id="Img-pathInput" type="hidden" name="imgPath" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>
<!-- 多图上传 -->
<script id="template3" type="text/html">
    <hr style="margin: 21px 0;">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
            <i class="layui-icon layui-icon-upload"></i> 多图片上传
        </button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
            预览图：
            <div class="layui-upload-list" id="upload-demo-preview"></div>
        </blockquote>
    </div>
</script>


<!-- 被每一条数据反复使用 -->
<!-- 表格操作模板 -->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
    <input lay-event="upload" type="button" class="layui-btn layui-btn-xs layui-bg-orange" value="上传附件"/>
</script>
<!-- 状态切换模板 -->
<script id="ID-table-demo-templet-switch" type="text/html" th:inline="none">
    <input type="checkbox" name="status" value="{{=d.id }}" title="上架|NO" lay-skin="switch"
           lay-filter="demo-templet-status" {{=d.status== 0 ? "checked" : "" }}>
</script>

<!-- 引入依赖的js文件 -->
<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    layui.use(['layer', 'form', 'treeTable', 'table', 'upload'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var treeTable = layui.treeTable;//树形表格
        var table = layui.table;//操作表格
        var upload = layui.upload;//上传文件
        var $ = layui.jquery;//从layui中把jquery拿出来用

        //根据一级分类的选项加载二级分类
        var loadCategory = function (f) {
            //获取一级下拉框的id
            var topId = $("#topCategory").val();
            //根据一级分类的id去查二级分类
            $.get("/category/children?id=" + topId, function (second) {
                //清空原来二级分类的所有option
                $("#secondCategory").html("");
                //把查到的二级分类遍历进二级分类的下拉框
                $.each(second, function (index, item) {
                    $("#secondCategory").append("<option value='" + item.id + "'>" + item.name + "</option>");
                })
                //渲染二级分类
                form.render();

                //执行这个方法的时候可以传一个函数（也可以不传），这个方法执行完了，就执行该函数
                if (f) {
                    f();
                }
            })
        };

        //给商品类型搜索框绑事件（只能查到二级分类）
        $.get("/product/all", function (categories) {
            //把option放到分类下拉框里
            $.each(categories, function (index, item) {
                $("#input1").append("<option value='" + item.id + "'>" + item.name + "</option>");
            })
            //再渲染下拉框
            form.render();
        });

        //给保存按钮绑事件
        //事件委托 标签名选择器 id选择器：作用于整个<body><body/> 只要当前页面有saveBtn，就能保存
        $("body").on("click", "#saveBtn", function () {
            //获取表单中的所有数据 lay-filter="form1"
            var data = form.val("form1");
            //判断属性是不是都填上了
            if (!data.name) {
                layer.msg("商品名不能为空")
                return false;
            }
            if (!data.edition) {
                layer.msg("版本不能为空")
                return false;
            }
            if (!data.color) {
                layer.msg("颜色不能为空")
                return false;
            }
            if (!data.model) {
                layer.msg("型号不能为空")
                return false;
            }
            if (!data.price) {
                layer.msg("价格不能为空")
                return false;
            }
            //把数据传到后台 Ajax异步请求
            $.post("/product/save", data, function () {
                    //关窗口
                    layer.closeAll();
                    //给成功提示
                    layer.msg("保存成功");
                    //再查一遍表格的数据（点一下查询按钮）
                    $("#searchBtn").click();
            });
        });

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //渲染表格 查数据
            table.render({
                elem: "#table1",
                url: "/product/table",
                cols: [[
                    {title: "ID", field: "id"},
                    {title: "商品名", field: "name"},
                    {title: "商品类型", field: "categoryName"},
                    {title: "版本", field: "edition"},
                    {title: "颜色", field: "color"},
                    {title: "型号", field: "model"},
                    {title: "价格", field: "price"},
                    {title: '状态', width: 85, templet: '#ID-table-demo-templet-switch'},
                    // {
                    //     title: "状态", field: "status", templet: function (provider) {
                    //         return provider.status === '0' ? '上架' : '下架';
                    //     }
                    // },
                    {title: "操作", templet: "#template2"}
                ]],
                where: {categoryId: $("#input1").val(), name: $("#input2").val(), edition: $("#input3").val()},
                page: true,
                limits: [10, 15, 20],
                limit: 10
            });
        }).click();

        //给切换状态绑定事件
        form.on('switch(demo-templet-status)', function (obj) {
            console.log(obj.value);//要操作的商品的ID
            console.log(obj.elem.checked);//true就是上架，false就是下架
            $.post("/product/status", {id: obj.value, status: obj.elem.checked ? 0 : -1}, function () {
                layer.msg("更新状态成功");
            });
        });

        //给新增按钮绑定事件
        $("#addBtn").on("click", function () {
            //发请求获取所有的一级分类（id=0）
            $.get("/category/children?id=0", function (tops) {
                //弹出窗口
                layer.open({
                    title: "新增商品",
                    type: 1,
                    area: ['400px', '600px'],
                    content: $("#template1").html()
                });
                //遍历所有的一级分类，放到一级分类下拉框里
                $.each(tops, function (index, item) {
                    $("#topCategory").append("<option value='" + item.id + "'>" + item.name + "</option>");
                });
                //再渲染一级分类下拉框
                form.render();

                //只要页面上有了一级分类，就可以加载二级分类了
                loadCategory();

                //使用lay-filter定位一级分类，一旦选择一级分类，就再加载一遍对应的二级分类
                form.on("select(topSelect)", function () {
                    loadCategory();
                });

                //渲染上传文件功能绑定的元素（图片/按钮···）
                upload.render({
                    //渲染哪个元素，使之可以上传文件
                    elem: "#Img-path",
                    //请求路径
                    url: "/attachment/uploadOne",
                    //上传完成后做什么
                    done: function (res, index, upload) {
                        if (res.code === 0) {
                            //把保存的路径放到文本框里
                            $("#Img-pathInput").val(res.data);
                            //在img里显示上传的图片 给id所指的标签加一个值，是文件上传的路径
                            $("#Img-path").attr("src", res.data);
                        }
                    }
                });
            });
        });

        //给表格操作（编辑/删除/多附件上传）绑事件
        treeTable.on("tool", function (obj) {
            //定位行和列
            var event = obj.event;//obj内记录自定义的event值，用以区分不同操作
            var data = obj.data;//data表示该行所有数据  用以区别行

            //说明点了编辑 点击编辑和点击新增弹窗一样
            if (event === "edit") {
                //根据id取当前商品的所有数据，取成功了，带着数据再弹窗
                $.get("/product/selectById/" + data.id, function (product) {
                    //取一级分类数据
                    $.get("/category/children?id=0", function (tops) {//function()内 给传回的json格式数据命名，方便在下面引用
                        //1.弹出窗口
                        layer.open({
                            title: "编辑菜单",
                            type: 1,
                            area: ['400px', '600px'],
                            content: $("#template1").html()
                        });

                        //遍历所有的一级分类，放到一级分类下拉框里
                        $.each(tops, function (index, item) {
                            $("#topCategory").append("<option value='" + item.id + "'>" + item.name + "</option>");
                        });
                        //回显二级分类之前，先根据商品所属的二级分类的parent_id回显一级分类
                        $("#topCategory").val(product.topCategoryId);

                        //只要页面上有了一级分类，就可以加载二级分类了
                        loadCategory(function () {
                            //2.把查到的product对象放进form表单中
                            //加载完二级分类，才会往表单里放数据
                            //第一个参数：定位form表单；第二个参数：给form表单赋值
                            form.val("form1", product);
                        });

                        //使用lay-filter定位一级分类，一旦选择一级分类，就再加载一遍对应的二级分类
                        form.on("select(topSelect)", function () {
                            loadCategory();
                        });

                        //渲染上传文件功能绑定的元素（图片/按钮···）
                        upload.render({
                            //渲染哪个元素，使之可以上传文件
                            elem: "#Img-path",
                            //请求路径
                            url: "/attachment/uploadOne",
                            //上传完成后做什么（res：返回值，ResultVO类型）
                            done: function (res, index, upload) {
                                if (res.code === 0) {
                                    //把保存的路径放到文本框里
                                    $("#Img-pathInput").val(res.data);
                                    //在img里显示上传的图片 给id所指的标签加一个值，是文件上传的路径
                                    $("#Img-path").attr("src", res.data);
                                }
                            }
                        });
                        //如果设置过头像了，就把头像放到框里
                        if (product.imgPath != null) {
                            $("#Img-path").attr("src", product.imgPath);
                        }
                    });
                });
            }

            //说明点了删除
            if (event === "delete") {
                //弹窗确认框 点击确认执行第二个函数，点击取消执行第三个函数
                layer.confirm("确认删除？", function () {
                    //第二个函数 点击确认 Ajax发请求
                    $.post("/product/delete/" + data.id, function (result) {
                        if (result.code === 0) {
                            layer.closeAll();
                            layer.msg("删除成功");
                            $("#searchBtn").click();
                        } else {
                            layer.closeAll();
                            layer.msg(result.msg);
                        }
                    })
                    //第三个函数 点击取消 自动关窗口
                }, function () {
                });
            }

            //说明点了上传
            if (event === "upload") {
                //先回显之前上传过的附件

                //再弹窗
                layer.open({
                    type: 1,
                    area: ["400px", '400px'],
                    title: "商品附件",
                    content: $("#template3").html()
                });

                //同一个商品的附件的id组成的数组（初始值为空）
                var attIds = "";

                //多图片上传 （一对多关系，多的一方建表，）
                upload.render({
                    elem: '#ID-upload-demo-btn-2',
                    url: '/attachment/upload',
                    multiple: true,//批量上传
                    //上传之前，展示预览图
                    before: function(obj){
                        obj.preview(function(index, file, result){
                            $('#upload-demo-preview').append('<img src="'+result+'" alt="'+ file.name +'" style="width: 90px; height: 90px;">')
                        });
                    },
                    //传几个文件就执行几遍
                    done: function(res){
                        //每成功上传一个文件，就给附件id拼一个","
                        if (attIds){
                            attIds += ",";
                        }
                        //再拼上一个附件id
                        attIds += res.data.id;
                    },
                    //都传完了之后做什么
                    allDone: function (){
                        //把上传的文件更新给这个商品（多个附件对应一个商品）
                        $.post("/product/bind",{id:data.id,attIds:attIds})
                    }
                });

            }

        });
    });
</script>
</body>
</html>